<template>
	<div class="lNumberInput">
		<!-- <div class="reduce" @click="reduce">
			<image mode="widthFix" src="@/static/image/reduce.png"></image>
		</div> -->
		<div class="input">
			<input :value="value" :always-embed="true" @change="valueChange" />
		</div>
		<!-- <div class="plus" @click="plus">
			<image mode="widthFix" src="@/static/image/add.png"></image>
		</div> -->
	</div>
</template>

<script>
	export default {
		props: ["value"],
		methods: {
			reduce() {
				let res = Number(this.value) - 1;
				this.$emit("change", !isNaN(res) ? res.toFixed(0) : 0);
			},
			plus() {
				let res = Number(this.value) + 1;
				this.$emit("change", !isNaN(res) ? res.toFixed(0) : 0);
			},
			valueChange(e) {
				this.$emit("change", !isNaN(Number(e.detail.value)) ? Number(e.detail.value).toFixed(0) : 0);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.lNumberInput {
		display: flex;
		justify-content: flex-start;
		align-items: stretch;

		.input {
			width: 180rpx;
			height: 50rpx;
			background-color: #f5f5f5;
			display: flex;
			justify-content: center;
			align-items: center;
			// margin: 0 10rpx;
			
			input {
				width: 90%;
				font-size: 24rpx;
				text-align: center;
			}
		}

		.reduce,
		.plus {
			width: 50rpx;
			height: 50rpx;
			background-color: #f5f5f5;
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				width: 30rpx;
			}
		}
	}
</style>